<template>
<!--账务查询-->
  <div>
    <div class="find-account-box">
      <div style="display: flex;padding-left: 15px;padding-top: 11px;height: 30px" >
        <a  href="#">
          <div style="display: flex"  @click="firstLoading" >
            <i class="icon-zhangwuchaxun" style="margin-top: 5px;margin-right: 5px;margin-left: 5px"></i>
            <h3>账务展示&nbsp;&nbsp;&nbsp;<span style="color: #ff3526">(普通账务订单不能查看账务细节,特殊账务订单(采购,开平,销售)可以查看账务细节)</span></h3>
          </div>
        </a>
        <SelectByCondition ref="selectByCondition"  style="margin-left: 330px" @selectMsgWay="selectMsgWay"/>
      </div>

      <div class="find-account-box-detail">
        <el-table
          v-loading="loading"
          :data="dataList"
          element-loading-text="已经很努力加载了(•́へ•́╬)"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          size="small"
          @selection-change="handleSelectionChange"
          height="561"
          style="width: 100%"
           >
          <el-table-column
            align="center"
            label="账务流水号"
            prop="accountId"
            width="130"
          >
          </el-table-column>
          <el-table-column
            align="center"
            label="类型"

            width="60"
          >
            <template slot-scope="scope">
            <el-tag effect="plain" v-if="scope.row.smallAccount.bigAccount.isPayOrTake===1">支出</el-tag>
            <el-tag effect="plain" v-if="scope.row.smallAccount.bigAccount.isPayOrTake===2">收入</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="账务大类"
            width="80"
          >
            <template slot-scope="scope">
              <el-tag  >{{scope.row.smallAccount.bigAccount.bigAccountName}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="账务小类"
            width="80"

          >
            <template slot-scope="scope">
              <el-tag effect="dark" >{{scope.row.smallAccount.smallAccountName}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="付款/收款人"
            width="230"
          >
            <template slot-scope="scope">
              <span style="font-weight: bold;font-size: 16px">{{scope.row.who}}</span>

            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="经办人"
            width="100"
          >
            <template slot-scope="scope">
              <el-tag type="danger" >{{scope.row.employee.realName}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="账务时间"
            width="90"
          >
            <template slot-scope="scope">
              <span >{{scope.row.accountTime}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="付款/收款方式"
            width="100"
          >
            <template slot-scope="scope">
              <span style="font-size: 16px;font-weight: bold;font-style: oblique">{{scope.row.payTake.payTakeName}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="收入"
            width="110"
          >
            <template slot-scope="scope">
              <span style="font-size: 16px;font-weight: bold;color: #ff3526" v-if="scope.row.smallAccount.bigAccount.isPayOrTake===2">{{scope.row.money}}元</span>
              <i class="icon-cuowu" style="font-size: 16px;font-weight: bold;color: #ff3526" v-if="scope.row.smallAccount.bigAccount.isPayOrTake===1"></i>

            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="支出"
            width="110"
          >
            <template slot-scope="scope">
              <span  style="font-size: 16px;font-weight: bold;color: #ff3526" v-if="scope.row.smallAccount.bigAccount.isPayOrTake===1">{{scope.row.money}}元</span>
              <i class="icon-cuowu"  style="font-size: 16px;font-weight: bold;color: #ff3526"  v-if="scope.row.smallAccount.bigAccount.isPayOrTake===2"></i>
            </template>

          </el-table-column>
          <el-table-column
            align="center"
            label="细节"
            width="70"
          >
            <template slot-scope="scope">
              <el-button :disabled="scope.row.way===1" icon="icon-xijie"   size="mini"></el-button>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="修改"
            width="50"
          >
            <template slot-scope="scope">
              <el-button type="text"><span class="el-icon-edit-outline"></span></el-button>

            </template>
          </el-table-column>

          <el-table-column
            align="center"
            label="选定"
            type="selection"
            width="46">
          </el-table-column>

        </el-table>
        <div  style="position: relative">
          <el-pagination
            align="center"
            style="margin-top: 10px"
            background
            :page-size="selectMsg.pageSize"
            :current-page="selectMsg.currentPage"
            layout="prev, pager, next"
            @current-change="changePage"
            :total="total">
          </el-pagination>
          <div style="position: absolute;right: 10px;top: 0px">

            <el-button   type="info" size="mini">删除</el-button>
          </div>
        </div>
        </div>
    </div>
  </div>
</template>

<script>
import SelectByCondition from "../../components/select/AccountSelectByCondition";
import {post} from "../../utils/request";
import {ACCOUNT_RECORDING_DATA} from "../../utils/basic-data";

export default {
  name: "FindAccountRecording",
  components:{SelectByCondition},
  data(){
    return{
        loading:false,
      multipleSelection:[],
      dataList:[],
      selectMsg:{
        currentPage:1,
        pageSize:ACCOUNT_RECORDING_DATA,
        way:0,
        payOrTakeWay:null,
        bigAccountId:null,
        smallAccountId:null,
        timeZone:null,
        who:null,
      }

    }
  },
  mounted() {
    this.firstLoading()
  },
  methods:{
    firstLoading() {
      this.loading = true
      var newselectMsg = {
        currentPage: 1,
        pageSize: ACCOUNT_RECORDING_DATA,
        way: 0,
        payOrTakeWay: null,
        bigAccountId: null,
        smallAccountId: null,
        timeZone: null,
        who: null,
      }
      this.selectMsg = newselectMsg
      post("/api/v1/select/account/data",this.selectMsg).then(resp=>{
        this.total=resp.data.total
        this.dataList=resp.data.objectList
        this.loading=false
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    changePage(value){
      this.loading=true
      this.selectMsg.currentPage=value
      post("/api/v1/select/account/data",this.selectMsg).then(resp=>{
        this.dataList=resp.data.objectList
          this.total=resp.data.total
        })
        this.loading=false

    },
    selectMsgWay(selectMsg){
      this.loading=true
      this.selectMsg=selectMsg
      this.selectMsg.currentPage=1
      post("/api/v1/select/account/data",this.selectMsg).then(resp=>{
        this.dataList=resp.data.objectList
        this.total=resp.data.total
        console.log(resp.data)
        this.loading=false
      })
    },
  }
}
</script>

<style scoped>
a{
  text-decoration: none;
  color: #2c3e50;
}
h3{
  margin: 0;
}

.find-account-box-detail{

  width: 1260px;
  margin-left: 15px;
  height: 617px;
  border-radius: 20px;
  background-color: #f2f2f2;
}
.find-account-box{
  height: 674px;

  margin-top: 10px;
  width: 1290px;
  background-color: white;
  border-radius: 30px;
  box-shadow:  20px 20px 60px #bebebe,
  -20px -20px 60px #ffffff;
}
</style>
